<template>
  <div class="userManagement">
    <div>
      <el-form :inline="true" :model="form" class="form">
        <el-form-item>
          <el-input
            prefix-icon="el-icon-search"
            v-model="form.query"
            placeholder="请输入要搜索的鞋品编号"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="onSearch()">搜索</el-button>
          <el-button type="warning" v-if="isMerchant" @click="insertUsers()">添加鞋品</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="typeUsers">
        <el-tabs v-model="activeName" >
          <el-tab-pane label="鞋品管理" name="first">
            <div>
              <el-table :data="shoesData" style="width: 100%">
                <el-table-column prop="shoesId" label="鞋品编号" width="170"></el-table-column>
                <el-table-column label="封面">
                  <template slot-scope="scope">
                    <el-image :src="scope.row.shoesImage" fit="fill" class="typeImage"></el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="shoesName" label="鞋名"></el-table-column>
                <el-table-column prop="shoesType" label="类别"></el-table-column>
                <el-table-column prop="shoesPrice" label="价格"></el-table-column>
                <el-table-column prop="shoesNumber" label="数量"></el-table-column>
                <el-table-column prop="shoesMonthNumber" label="月销量"></el-table-column>
                <el-table-column prop="shoesDiscsss" label="评论数"></el-table-column>
                <el-table-column label="操 作" width="160">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      class="btnNot"
                    >编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-dialog title="请输入你要修改的价格" width="40%" :visible.sync="dialogVisible">
              <el-form ref="form" :model="updateForm" label-width="90px">
                <el-form-item label="价格">
                  <el-input v-model="updateForm.shoesPrice" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <div style="float:right;">
                    <el-button @click="btnNot()" class="btnNot">取 消</el-button>
                    <el-button type="warning" @click="queren()">确 认</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </el-dialog>
            <div style="margin-top:20px;">
              <el-pagination
                :current-page="currentshoesPage"
                @current-change="handleCurrentshoesChange"
                background
                layout="prev, pager, next"
                :total="shoesTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      updateForm: {
        shoesPrice: "",
        shoesId: ""
      },
      activeName: "first",
      form: {
        query: ""
      },
      currentshoesPage: 1,
      shoesTotal: 0,
      shoesData: []
    };
  },
  methods: {
    onSearch(){
      let that = this;
      let shoesId = that.form.query;
      let shoesData=[];
      that.$axios
        .post("/shoes/queryShoesInfoByShoesId?shoesId=" + shoesId, {})
        .then(function(response) {
          console.log(response);
          that.shoesTotal = 1;
          shoesData.push(response.data.data)//将后台返回的对象转换成数组
          that.shoesData = shoesData;
          
        }).catch(function(error) {
          console.log(error);
        });
    },
    handleCurrentshoesChange(val) {
      let that = this;
      that.currentshoesPage = val;
      that.shoesDataGet();
    },
    handleEdit(index, row) {
      let that = this;
      that.dialogVisible = true;
      that.updateForm.shoesId = row.shoesId;
    },
    btnNot() {
      this.dialogVisible = false;
    },
    queren() {
      let that = this;
      let shoesId = that.updateForm.shoesId;
      let shoesPrice = that.updateForm.shoesPrice;
      that.$axios.post("/shoes/shoesUpdate", {
        "shoesId": shoesId,
        "shoesPrice": shoesPrice
      }).then(function(response) {
        alert("编辑成功！");
        that.updateForm = {};
        window.location.reload(true);
      })
    },
    handleDelete(index, row) {
      let that = this;
      let shoesId = row.shoesId;
      that.$axios
        .post("/shoes/shoesDelete?shoesId=" + shoesId, {})
        .then(function(response) {
          console.log(response);
          alert("删除成功！");
          window.location.reload(true);
        }).catch(function(error) {
          console.log(error);
        });
    },
    insertUsers() {
      this.$router.push("/user/shoesAdd");
    },
    shoesDataGet() {
      let that = this;
      let page = that.currentshoesPage;
      let userId = JSON.parse(localStorage.getItem("user")).userId;
      that.$axios
        .post("/shoes/queryShoesInfoListByUserId?userId=" + userId, {})
        .then(function(response) {
          that.shoesTotal = response.data.data.records;
          that.shoesData = response.data.data.rows;
          for (let i = 0; i < that.shoesData.length; i++) {
            if (that.shoesData[i].shoesType == "tuoxie") {
              that.shoesData[i].shoesType = "拖鞋";
            } else if (that.shoesData[i].shoesType == "xiuxianxie") {
              that.shoesData[i].shoesType = "休闲鞋";
            } else if (that.shoesData[i].shoesType == "banxie") {
              that.shoesData[i].shoesType = "板鞋";
            } else if (that.shoesData[i].shoesType == "lanqiuxie") {
              that.shoesData[i].shoesType = "篮球鞋";
            } else if (that.shoesData[i].shoesType == "paobuxie") {
              that.shoesData[i].shoesType = "跑步鞋";
            } else if (that.shoesData[i].shoesType == "zuqiuxie") {
              that.shoesData[i].shoesType = "足球鞋";
            } else if (that.shoesData[i].shoesType == "wangqiuxie") {
              that.shoesData[i].shoesType = "网球鞋";
            } else if (that.shoesData[i].shoesType == "fanbuxie") {
              that.shoesData[i].shoesType = "帆布鞋";
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    shoesAdminDataGet() {
      let that = this;
      let page = that.currentshoesPage;
      that.$axios
        .post("/shoes/queryShoesInfoListAll?page=" + page, {})
        .then(function(response) {
          that.shoesTotal = response.data.data.records;
          that.shoesData = response.data.data.rows;
          for (let i = 0; i < that.shoesData.length; i++) {
            if (that.shoesData[i].shoesType == "tuoxie") {
              that.shoesData[i].shoesType = "拖鞋";
            } else if (that.shoesData[i].shoesType == "xiuxianxie") {
              that.shoesData[i].shoesType = "休闲鞋";
            } else if (that.shoesData[i].shoesType == "banxie") {
              that.shoesData[i].shoesType = "板鞋";
            } else if (that.shoesData[i].shoesType == "lanqiuxie") {
              that.shoesData[i].shoesType = "篮球鞋";
            } else if (that.shoesData[i].shoesType == "paobuxie") {
              that.shoesData[i].shoesType = "跑步鞋";
            } else if (that.shoesData[i].shoesType == "zuqiuxie") {
              that.shoesData[i].shoesType = "足球鞋";
            } else if (that.shoesData[i].shoesType == "wangqiuxie") {
              that.shoesData[i].shoesType = "网球鞋";
            } else if (that.shoesData[i].shoesType == "fanbuxie") {
              that.shoesData[i].shoesType = "帆布鞋";
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  computed: {
    isMerchant() {
      if (localStorage.getItem("user")) {
        return true;
      } else if (localStorage.getItem("adminUser")) {
        return false;
      }
    }
  },
  created() {
    let that = this;
     if (localStorage.getItem("user")) {
        that.shoesDataGet();
      } else if (localStorage.getItem("adminUser")) {
        that.shoesAdminDataGet();
      }
  }
};
</script>
<style scoped>
.userManagement .input {
  width: 600px;
}
.userManagement >>> .el-tabs__active-bar {
  background-color: #e6a23c;
}
.userManagement >>> .el-tabs__item.is-active {
  color: #e6a23c;
}
.userManagement >>> .el-tabs__item:hover {
  color: #e6a23c;
}
.userManagement .btnNot:hover {
  color: #e6a23c;
  border-color: #e6a23c;
  background-color: #faf3e8;
}
.userManagement >>> .el-pager li:not(.disabled).active {
  background-color: #e6a23c;
}
.userManagement .typeImage {
  width: 80px;
  height: 80px;
}
</style>